<template>
    <a-card class="Acard">
        <a-row slot="cover" id="twoHang">

            <!--新增-->
            <a-button
                    type="primary"
                    @click="addModelOpen"
                    class="twoHangButton"
                    style="background-color: green;border-color: green;color: white;"
                    icon="plus">新增
            </a-button>
            <insert-user-xy ref="addModelFrom" @ok="loadData"></insert-user-xy>

            <!--修改-->
            <a-button @click="mdfModelOpen" class="twoHangButton" type="primary" icon="form">修改</a-button>
            <update-user-xy ref="mdfModelFrom" @ok="loadData"></update-user-xy>

            <!--删除-->
            <a-button
                    @click="delModel"
                    class="twoHangButton"
                    style="background-color: red;color: white;border-color: red"
                    type="primary"
                    icon="delete">删除
            </a-button>
            <a-modal title="delModel" v-model="delVisible" @ok="delOk">
                是否确认删除 《{{ thisXy.xyMc }}》
            </a-modal>

        </a-row>


        <a-row slot="cover" :gutter="12" id="oneHang">
            <a-col :xs="24" :sm="6" :md="6" :xl="6" class="Acol">
                <div class="leftMenu">
                    <ul class="menu">
                        <li v-for="xy in allXy" class="menuLi">
                            <span @click="selectXy(xy.key)">{{ xy.xyMc }}</span>
                        </li>
                    </ul>
                </div>
            </a-col>
            <a-col :xs="24" :sm="18" :md="18" :xl="18" class="rightContent Acol">
                <div>
                    <div class="allContent">
                        <div class="title">{{ thisXy.xyMc }}</div>
                        <div class="createTime">{{ thisXy.xyXgrqsj }}</div>
                        <div id="xyNrContent" class="content" v-html="thisXy.xyNr"></div>
                    </div>
                </div>
            </a-col>
        </a-row>
    </a-card>

</template>

<script>
    import 'tinymce/themes/silver/theme.min.js';
    import 'tinymce/skins/ui/oxide/skin.min.css';

    import UpdateUserXy from './XyGl/UpdateUserXy'
    import InsertUserXy from './XyGl/InsertUserXy'
    import ARow from "ant-design-vue/es/grid/Row";
    import {getAction} from '@/api/manage'
    import $ from 'jquery'

    export default {
        name: "XyManage",
        components: {
            ARow, UpdateUserXy,InsertUserXy
        },
        mixins: [],
        data() {
            return {
                delVisible: false,
                allXy: "",
                thisXy: null,
                content:null,
                url: {
                    "getAllUserXy": "/user_xy/userXy/getAllUserXy",
                    "saveOneUserXy": "/user_xy/userXy/saveOneUserXy",
                    //userXy
                    "delOneUserXy": "/user_xy/userXy/delOneUserXy"
                    //int xyId
                },
            }
        },
        created() {
            this.loadData();
        },
        methods: {
            selectXy(key) {
                console.log("选中", key);
                var menuLis = document.getElementsByClassName("menuLi");
                for (var i = 0; i < menuLis.length; i++) {
                    menuLis[i].style.color = "#000000"
                }
                menuLis[key].style.color = "#ff7672";
                this.thisXy = this.allXy[key];
                $("#xyNrContent").html(this.allXy[key].xyNr);
            },
            addModelOpen() {
                this.$refs.addModelFrom.addModelOpen()
            },
            mdfModelOpen() {
                this.$refs.mdfModelFrom.mdfModelOpen(this.thisXy)
            },
            delModel: function () {
                if (this.thisXy == null) {
                    this.$message.error('未选中协议', 5);
                }
                this.delVisible = true;
            },
            delOk(e) {
                console.log(e);
                this.delVisible = false;
            },
            loadData() {
                console.log(this.url.getAllUserXy);
                getAction(this.url.getAllUserXy).then((res) => {
                    if (res.success) {
                        this.allXy = res.result;
                        var i;
                        for (i = 0; i < this.allXy.length; i++) {
                            this.allXy[i].key = i;
                            this.allXy[i].xyLxbz =  this.allXy[i].xyLxbz+"";
                            this.allXy[i].xySfqy =  this.allXy[i].xySfqy+"";
                        }
                        this.thisXy = this.allXy[0];
                        console.log('allXy', this.allXy);
                    } else {
                        this.$message.error('协议数据获取失败');
                        // this.$message.info('This is a normal message',1);修改的全局提醒
                        // this.$message.success("");//添加的全局提醒
                        // this.$message.error('This is a message of error');//错误的提醒
                    }
                })
            }
        }
    }
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
    }

    #twoHang {
        height: 32px;
        width: 100%;
        margin-bottom: 20px;
    }

    #twoHang .twoHangButton {
        width: 82px;
        margin-right: 6px;
        font-weight: 400;
        padding: 0 15px;
        font-size: 14px;
        border-radius: 4px;
        height: 32px;
    }

    .Acol {
        margin-bottom: 12px;
    }

    .Acard {
        height: 100%;
        width: 100%;
        padding: 32px;
    }

    .leftMenu {
    }

    .leftMenu > .menu {
        border: 1px solid #91d5ff;
        background-color: #e6f7ff;
        border-radius: 5%;
        margin-top: .2rem;
        padding: 0 .5rem;
        font-size: 1.1rem;
    }

    .leftMenu > .menu li {
        line-height: 40px;
        transition: all .1s;
    }

    .leftMenu > .menu li:hover {
        color: #ff7672;
    }

    .leftMenu > .menu li span {
        cursor: pointer;
    }

    .menuLi:nth-child(1) {
        color: #ff7672;
    }

    ul, li {
        list-style: none;
    }

    .rightContent .allContent {
        padding: 20px 40px;
        height: auto;
    }

    .rightContent .allContent > .title {
        width: 100%;
        font-size: 1.5rem;
        text-align: center;
        font-weight: 600;
    }

    .rightContent .allContent > .createTime {
        width: 100%;
        font-size: .8rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;

    }

    .rightContent .allContent > .content {
        min-height: 10rem;
    }
</style>